<template>
	<div class="px-[18px] py-[16px] tab">
		<div class="w-full tab__list">
			<div v-for="(item, index) in tabs" :key="index" class="tab__list__item" :class="{ active: tabActive === index, left: index === 0, right: index === 1 }" @click="handleClick(item, index)">
				{{ item.title }}{{ index === 0 ? `（${num}）` : null }}
			</div>
		</div>
	</div>
</template>

<script>
export default {
	name: 'Tab',
	data() {
		return {
			tabActive: 1,
			tabs: [
				{
					title: '今日接待',
					key: 1,
				},
				{
					title: '全部接待',
					key: 0,
				},
			],
			num: 0,
			time: null,
		};
	},
	watch: {
		tabActive: {
			handler: function () {
				this.getNum();
			},
			immediate: true,
		},
	},
	// created() {
	// 	this.time = setInterval(() => {
	// 		const item = this.tabs[this.tabActive];
	// 		this.$store.dispatch('ws/updateIsDay', item.key);
	// 	}, 1500);
	// },
	// beforeDestroy() {
	// 	clearInterval(this.time);
	// 	this.time = null;
	// },
	methods: {
		getNum() {
			this.$request.get('/mall/message/receptionToday').then((res) => {
				this.num = res.data;
			});
		},
		handleClick(item, index) {
			this.tabActive = index;
			this.$store.dispatch('ws/updateIsDay', item.key);
		},
	},
};
</script>

<style scoped lang="scss">
.tab {
	border-bottom: 1px solid #f2f2f2;
	&__list {
		border: 1px solid #f2f2f2;
		display: flex;
		font-size: 12px;
		align-items: center;
		border-radius: 4px;
		&__item {
			width: 50%;
			text-align: center;
			height: 32px;
			line-height: 32px;
			cursor: pointer;
		}
		.active {
			background: #6373ee;
			color: #fff;
		}
		.active.left {
			border-radius: 4px 0 0 4px;
		}
		.active.right {
			border-radius: 0 4px 4px 0;
		}
	}
}
</style>
